<template>
  <div ref="wrapper_hook" class="wrapper"/>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'balanceBar',
  props: {
    source: {
      type: Object,
      default: () => {
        return {
          legendData: [],
          yAxisData: [],
          gathData: [],
          profitData: []
        }
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    source(newValue) {
      this._initECharts(newValue)
    }
  },
  mounted() {
    this._initECharts(this.source)
    window.addEventListener('resize', this.resize, false)
    this.$once('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.resize)
    })
  },
  destroyed() {
    this.chart.dispose()
  },
  methods: {
    _initECharts(data) {
      this.chart ? this.update(data) : this.draw(data)
    },
    resize(delay = 400) {
      setTimeout(() => {
        this.chart && this.chart.resize()
      }, delay)
    },


    draw(data) {
      this.chart = echarts.init(this.$refs.wrapper_hook)
      const {yAxisData, gathData, profitData, legendData} = data
      const textColor = '#444343'
      const lineColor = 'rgba(85,85,85,0.1)'
      const option = {
        baseOption: {
          backgroundColor: '#fff',
          timeline: {
            show: false,
            top: 0,
            data: []
          },
          legend: {
            top: 20,
            right: 'center',
            itemWidth: 20,
            itemHeight: 5,
            icon: 'horizontal',
            textStyle: {
              color: '#343434',
              fontSize: 14
            },
            data: legendData
          },
          dataZoom: [],
          grid: [
            {
              show: false,
              left: '14%',
              top: 50,
              bottom: '5%',
              containLabel: true,
              width: '26%'
            },
            {
              show: false,
              left: '53%',
              top: 50,
              bottom: '4.5%',
              width: '100%',
              containLabel: false
            },
            {
              show: false,
              right: '4%',
              left: '62%',
              top: 50,
              bottom: '5%',
              containLabel: true,
              width: '24%'
            }
          ],
          xAxis: [
            {
              type: 'value',
              inverse: true,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              position: 'top',
              axisLabel: {
                show: false,
                color: textColor
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: lineColor
                }
              }
            },
            {
              gridIndex: 1,
              show: true
            },
            {
              gridIndex: 2,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              position: 'top',
              axisLabel: {
                show: false,
                color: textColor
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: lineColor
                }
              }
            }],
          yAxis: [
            {
              type: 'category',
              inverse: true,
              offset: 30,
              position: 'right',
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitLine: {
                show: false
              },
              splitArea: {
                show: false
              },
              data: yAxisData
            },
            {
              gridIndex: 1,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                padding: [30, 0, 0, 0],
                verticalAlign: 'top',
                align: 'top',
                textStyle: {
                  color: '#343434',
                  fontSize: 13
                }
              },
              data: yAxisData.map(function (value) {
                return {
                  value: value,
                  textStyle: {
                    align: 'center'
                  }
                }
              })
            },
            {
              gridIndex: 2,
              type: 'category',
              inverse: true,
              position: 'left',
              axisLine: {
                show: true,
                lineStyle: {
                  color: lineColor
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitLine: {
                show: false
              },
              splitArea: {
                show: false
              },
              data: yAxisData
            }],
          series: []
        },
        options: []
      }

      if(gathData.length > 18) {
       // option.baseOption.dataZoom = this.setZoom()
      }else {
        option.baseOption.dataZoom = []
      }
      option.options.push({
        series: [
          {
            name: legendData[0],
            type: 'bar',
            barWidth: 12,
            stack: '1',
            itemStyle: {
              normal: {
                color: '#f35656'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'left',
                padding: [0, 8, 0, 0],
                textStyle: {
                  color: '#343434',
                  fontSize: 13
                }
              }
            },
            data: gathData
          },
          {
            name: legendData[1],
            type: 'bar',
            stack: '2',
            barWidth: 12,
            xAxisIndex: 2,
            yAxisIndex: 2,
            itemStyle: {
              normal: {
                color: '#3eeaa2'
              }
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                padding: [0, 0, 0, 8],
                textStyle: {
                  color: '#343434',
                  fontSize: 13
                }
              }
            },
            data: profitData
          }
        ]
      })

      this.chart.setOption(option)
      this.chart.on('click', params => {
        this.$emit('change', params)
      })
    },
    setZoom() {
      return [
        {
          type: 'slider',
          orient:'vertical',
          yAxisIndex: [0,1,2],
          width:16,
          start:0,
          end:70,
          right:10,
          filterMode: 'none',
        }
      ]
    },
    update(data) {
      if (!this.chart) return
      const {yAxisData, gathData, profitData, legendData} = data
      const options = this.chart.getOption()
      if(gathData.length > 18) {
       // options.dataZoom = this.setZoom()
      }else {
        options.dataZoom = []
      }
      options.legend[0].data = legendData
      options.yAxis[0].data = yAxisData
      options.yAxis[1].data = yAxisData.map(value => ({
        value: value,
        textStyle: {
          align: 'center'
        }
      }))
      options.yAxis[2].data = yAxisData
      options.series[0].name = legendData[0]
      options.series[0].data = gathData
      options.series[1].name = legendData[1]
      options.series[1].data = profitData

      let state = {
        '利润':'#28DC32FF',
        '油耗':'#F9C14EFF',
        '维修':'#28DEF6FF',
        '过路费':'#188df0',
        '停车费':'#F84ABFFF',
        '工资':'#F53D1FFF',
        '折旧':'#88c776',
        '保费':'#4a9cc7',
        '规费':'#b96adb',
        '里程':'#e58e5f',
      }
      let name = legendData[1]
      options.series[1].itemStyle = {color: state[name]}
      this.chart.setOption(options, true)
    }
  }
}
</script>

<style scoped>
.wrapper {
  width: 100%;
  min-height: 280px;
}
</style>

